<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{commons/common::head(~{::title})}">
    <title>404页面</title>
    <meta name="renderer" content="webkit" />
</head>
<body>

<!--导航栏 menu-->
<div th:replace="~{commons/common::menu}"></div>

<!-- <h2><span id="time" style="color: red;">10</span>秒之后跳转到首页！</h2>-->
<div class="m-container-small m-padded-tb-massive">
    <div class="ui container">
        <div class="ui segment center aligned">
            <img class="ui rounded image" th:src="@{/images/404.png}"/>
            <a class="ui primary button" th:href="@{/index.html}">
                返回首页
            </a>
        </div>
    </div>
</div>

<br>
<br>
<br>
<br>
<br>


<!--底部 footer-->
<div th:replace="~{commons/common::footer}"></div>

<!-- 引用的 js-->
<th:block th:replace="~{commons/common::script}">
</th:block>


<script>

    // 倒计时读秒效果显示
/*
    let second = 10;
    let time = $('#time');

    function countDown() {
        time.text(--second + ""); // 加空字符串是为了把second变成字符串
        // 在方法中判断如果时间 <= 0，则跳转
        if (second <= 0) {
            location.href = "http://localhost:8080/index.html";
        }
    }
*/

    // 定义一个计时器，每一秒执行一次
    setInterval(countDown, 1000);

    // 在手机端点击汉堡按钮，重新显示隐藏的导航栏内容
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hidden');
    });

    // 搜索框弹出消息
    $('.m-popup input').popup({
        on: 'focus',
        position: 'bottom center'
    });
</script>

</body>
</html>